<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="search">
			<u-icon name="scan" size="50" suffixIconStyle="color: #909399" @click="scanCode" ></u-icon>
			<u-search style="width: 100%;" v-model="queryParam.orderParams" @custom="search" @search="search"></u-search>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="loadData">
			<view v-for="(item,index) in list" :key="item.id">
				<u-card @click="navTo('/pages/sys/workbench/installPhotoDetails',item)" class="task-list-item"
					:border="false" padding="20" margin="20rpx">
					<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;font-size: 30rpx;">{{item.orderNumber || ''}}</view>
						<view style="color: #999999;font-size: 22rpx;">{{item.orderDate || ''}}</view>
					</view>
					<view class="" slot="body">
						<u-row gutter="16">
							<u-col span="12">
								<!-- <view class="apply-text"><span>项目号：</span>100001001</view> -->
								<view class="apply-text"><span>客户名称：</span>{{ item.customerName || '' }}</view>
								<view class="apply-text"><span>地址：</span>{{item.address || ''}}</view>
								<view class="apply-text"><span>业主电话：</span>{{item.phone || ''}}</view>
								<view class="apply-text"><span>安装时间：</span>{{item.installerDate || ''}}</view>
								<view class="apply-text"><span>完成时间：</span>{{item.installDate || ''}}</view>
								<view class="apply-text"><span>备注：</span>{{item.newRemark || ''}}</view>
								<view class="apply-text"><span>附件：</span></view>
								
								<view style="padding: 20rpx;"  v-for="(attach,index) in item.attachList" :key="index">
									<image class="user-images" :src="attach.replace(/\\/g,'/')"  @click.stop="previewImage(attach)"></image>
								</view>
								<view style="padding: 20rpx;" v-if="current==2">
									
									<view class="apply-text"><span>安装拍照：</span></view>
									<image class="user-images" v-for="(child,idx) in item.installerAttachList" @click.stop="previewImage(child)" :src="child.replace(/\\/g,'/')" :key="idx"></image>
								</view>
							</u-col>
						</u-row>
					</view>
					<!-- <view class="apply-list-foot" slot="foot" style="text-align: right;color: #58ca93;">
						审批通过
					</view> -->
				</u-card>
			</view>
		</mescroll-uni>
	</view>

</template>

<script>
	import MescrollMixins from '@/components/mescroll-uni/mescroll-mixins';
	import ListMxin from './mixins/ListMxin';
	import {
		stringify,getQueryString
	} from '@/common/common';
	
	export default {
		mixins: [MescrollMixins, ListMxin],
		data() {
			return {
				queryParam: {
					orderParams: '', //搜索条件查询
					// orderNumber //单据查询
					installerStatus: 0, //状态 0-待接单 1-待配送 2-已配送
					installerType: 2, //类型 1-配送  2-安装
					status: '7,8,9',
					shippingStatus:1
				},
				tabList: [{
					name: '待接单'
				}, {
					name: '待安装',
				}, {
					name: '已安装',
				}],
				current: 0,
				show: false,
				url: {
					list: 'vehicleDispatchList'
				},
				list: []
			}
		},
		created() {

		},
		methods: {
				
				scanCode() {
					console.log(666);
					// this.$refs.loadinToast.show({ ...this.toastParams });
					this.doScan();
				},
				doScan() {
					uni.scanCode({
						scanType: ["qrCode"],
						success: (res) => {
							console.log('success');
							let code = getQueryString(res.result,'orderNumber');
							//扫描编号
							this.queryParam.orderNumber = code
							this.list = []
							this.getList({num:1,size:10})
						}, 
						fail: (res) => {
							console.log('未识别到二维码');
							this.$refs.loadinToast.hide();
						},
					})
				},
				comfirm(item) {
					if(+item.installerStatus >=1) return 
					let that = this;
					uni.showModal({
						title: '提示',
						content: `确认接受此安装任务？`,
						success: (res)=>{
							if (res.confirm) {
								let param ={
									installerStatus: this.current + 1,
									id:item.installerId,
								}
								this.$u.api.updateInstallStatus(param).then(res=>{
									console.log(res);
									if(res.code == 200){
										this.$u.toast('操作成功！')
										setTimeout(()=>{
											this.change(this.current + 1)
										},1500)
									}
								})
							}
						}
					});
				},
			change(index) {
				this.list = []
				this.current = index;
				this.queryParam.installerStatus = index
				this.loadData({
					num: 1,
					size: 10
				})
			},
			
			navTo(url,item) {
				if(this.current == 0){
					this.comfirm(item)
				}else if(this.current == 1){
					item.currentIndex = this.current
					let query = stringify(item)
					uni.navigateTo({
						url: `${url}?${query}` 
					});
				}
			},

			/**
			 * 组装参数
			 */
			getQueryParams() {
				let params = Object.assign({}, this.queryParam)
				return params
			},
			
		}

	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	
	.wrap .search{
		padding: 20rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		width: 100%;
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.user-images {
		width: 80px;
		height: 80px;
		margin-right: 8px;
	}

	.apply-list-foot {
		font-size: 28rpx;
	}

	.personnel-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.personnel-user {
			position: relative;
			margin: 5px 9px 0;
		}

		.user-images {
			width: 48px;
			height: 48px;
			margin-right: 0;

		}

		.iconfont {
			position: absolute;
			top: -12px;
			right: -5px;
			color: #FE0100;
		}
	}
</style>